<template>
  <!-- Notice页面 -->
  <div>
    <head-top
      :searchContent="searchValue"
      @search="search"
      @increase="increase('ruleForm')"
      @delAllSelection="delAllSelection"
    ></head-top>
    <div v-if="!empty">
      <table-item
        :tableData="notice"
        :currentPage="currentPage"
        :pageSizes="pageSizes"
        :pages="pages"
        :total="total"
        :multipleSelection="multipleSelection"
        @handleSelectionChange="handleSelectionChanges"
        @toggleSelection="toggleSelection"
        @handleSizeChange="handleSizeChanges"
        @handleCurrentChange="handleCurrentChanges"
      >
        <template v-slot:tableContent>
          <el-table-column label="发表人">
            <template slot-scope="scope">
              <div class="myDsipaly">
                <el-image
                  style="width: 40px; height: 40px;border-radius: 50%; margin:0 15px 0 0;"
                  :src="scope.row.user.avatar"
                  fit
                  :preview-src-list="[scope.row.user.avatar]"
                ></el-image>
                <span>{{ scope.row.user.username}}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="title" label="公告标题"></el-table-column>
          <el-table-column prop="content" label="公告内容"></el-table-column>

          <el-table-column label="公告发表时间">
            <template slot-scope="scope">
              <div>{{FormateDate(scope.row.createTime)}}</div>
            </template>
          </el-table-column>
          <!-- 选项 -->
          <options @deleteById="deleteById" @edit="edit"></options>
        </template>
      </table-item>
      <!--修改弹出框 -->

      <dialogs :title="title" :show="showDialog" @cencle="cencle" @determine="determine">
        <el-form :model="form" :rules="rules">
          <el-form-item label="标题" :label-width="formLabelWidth">
            <el-input v-model="form.title" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="内容" :label-width="formLabelWidth">
            <el-input v-model="form.content" auto-complete="off"></el-input>
          </el-form-item>
        </el-form>
      </dialogs>

      <!-- 添加弹出框 -->
      <dialogs :title="title" :show="showDialog2" @cencle="cencles" @determine="submitSucess">
        <el-form :model="form2" :rules="rules" ref="ruleForm">
          <el-form-item label="标题" prop="title" :label-width="formLabelWidth">
            <el-input v-model="form2.title" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="内容" prop="content" :label-width="formLabelWidth">
            <el-input v-model="form2.content" auto-complete="off"></el-input>
          </el-form-item>
        </el-form>
      </dialogs>
    </div>

    <el-empty v-else description="暂无数据~~╮(╯▽╰)╭~~"></el-empty>
  </div>
</template>

<script>
import headTop from '../../common/header.vue'
import tableItem from '../../common/tableItem.vue'
import options from '../../common/options.vue'
import dialogs from '../../common/dialogs.vue'
import FormateDates from '../../utils/data'
export default {
  components: {
    headTop,
    tableItem,
    options,
    dialogs,
  },
  data() {
    return {
      title: '公告栏',
      notice: [],
      currentPage: 1,
      pageSizes: 4,
      total: 1,
      empty: false,
      searchValue: '',
      multipleSelection: [],
      pages: 1,
      showDialog: false,
      showDialog2: false,

      form: {
        title: '',
        content: '',
      },
      form2: {
        title: '',
        content: '',
      },
      rules: {
        title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
        content: [{ required: true, message: '请输入内容', trigger: 'blur' }],
      },
      formLabelWidth: '120px',
      rowId: 0, // 每次点击行行的id
    }
  },
  created() {
    this.init()
  },
  methods: {
    FormateDate(val) {
      return FormateDates.formatDateTime4(val)
    },
    // 获取用户信息
    async init() {
      const res = await this.$axios.get(
        '/notice/list?current=' + this.currentPage + '&size=' + this.pageSizes
      )
      if (res.data.code == 200) {
        this.notice = res.data.data.records
        this.pageSizes = res.data.data.size
        this.currentPage = res.data.data.current
        this.pages = res.data.data.pages
        this.total = res.data.data.total

        if (this.notice.length == 0) {
          this.empty = true
        } else {
          this.empty = false
        }
      }
    },
    // 搜索
    async search(searchValue) {
      this.searchValue = searchValue
      const res = await this.$axios.get(
        '/notice/list?title=' + this.searchValue
      )
      if (res.data.code == 200) {
        this.notice = res.data.data.records
        this.pageSizes = res.data.data.size
        this.currentPage = res.data.data.current
        this.pages = res.data.data.pages
        this.total = res.data.data.total
        this.searchValue = ''

        if (this.notice.length == 0) {
          this.empty = true
          this.$message.error('搜索失败')
        } else {
          this.$message.success('搜索成功')
          this.empty = false
        }
      }
    },
    // 添加
    increase() {
      this.form2.title = ''
      this.form2.content = ''
      this.showDialog2 = !this.showDialog2
    },
    // 添加成功
    async submitSucess() {
      if (this.form2.title == '') {
        Notify({ type: 'warning', message: '请填写标题' })
        return
      } else if (this.form2.content == '') {
        Notify({ type: 'warning', message: '填写内容' })
        return
      } else {
        const res = await this.$axios.post('/notice/save', {
          userId: this.$store.getters.getUserInfo.id,
          title: this.form2.title,
          content: this.form2.content,
        })
        if (res.data.code == 200) {
          this.$message.success('发布公告成功')
          this.init()
        } else {
          this.$message.success('发布公告失败')
        }
      }

      this.showDialog2 = false
    },

    // 单个删除
    async deleteById(row) {
      const confirmresult = await this.$confirm(
        '此操作将永久删除该该用户,不可恢复， 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).catch(async (err) => err)
      if (confirmresult != 'confirm') {
        return this.$message.info('已取消删除！！')
      } else {
        const res = await this.$axios.post('/notice/delete', [row.id])
        if (res.data.code == 200) {
          this.$message.success('成功删除!')
          this.init()
        } else {
          this.$message.error('删除失败')
        }
      }
    },

    // 显示编辑框编辑
    edit(row) {
      this.rowId = row.id
      this.showDialog = !this.showDialog
      this.form.title = row.title
      this.form.content = row.content
    },
    // 弹出框取消按钮
    cencle() {
      this.showDialog = false
    },
    cencles() {
      this.showDialog2 = false
    },
    // 弹出框确定按钮 发起修改请求
    async determine() {
      //修改接口

      const res = await this.$axios.post('/notice/update', {
        id: this.rowId,
        title: this.form.title,
        content: this.form.content,
      })
      if (res.data.code == 200) {
        this.init()
        this.$message.success('修改成功')
      } else {
        this.$message.error('修改失败')
      }
    },
    // 批量删除
    async delAllSelection() {
      const length = this.multipleSelection.length
      let delList = []
      for (let i = 0; i < length; i++) {
        delList.push(this.multipleSelection[i].id)
      }
      const res = await this.$axios.post('/notice/delete', delList)
      console.log(delList)
      if (res.data.code == 200) {
        this.$message.success(`成功删除!`)
        this.init()
      } else {
        this.$message.error('删除失败')
      }
      this.multipleSelection = [] // 删除后清空列表
    },
    handleSelectionChanges(val) {
      this.multipleSelection = val
    },
    toggleSelection() {
      this.multipleSelection = []
    },
    // 每页显示行数变换
    handleSizeChanges(val) {
      this.currentPage = 1
      this.pageSizes = val
      console.log(val)

      this.init()
    },
    // 当前第几页变化
    handleCurrentChanges(val) {
      this.currentPage = val

      this.init()
    },
    //清空表单
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    indexSort(index) {
      console.log(this.pages)
      console.log(this.currentPage - 1)
      return (this.currentPage - 1) * this.pages + index + 1
    },
  },
}
</script>

<style scoped>
</style>
